<template>
    <div>
        <div v-if="data.singleImg.using && !data.singleImg.src">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.singleImg.using" class="wraper">
            <div  class="body">
                <!--单图片-->
                <div class="user-img">
                    <img :src="data.userInfo.headImg" alt="img">
                </div>
                <div class="banner">
                    <div :class="bannerTitle?'item-hidden':''" class="item item1">
                        <span>{{adverTitle ||"标题"}}</span>
                        <span style="font-size:10px;">{{data.singleImg.link.toUpperCase() || "DISPLAY.COM"}}</span>
                    </div>
                    <div :class="bannerDetail?'item-hidden':''" class="item item2">
                        <span class="item-single">{{data.adText ||'动态消息链接描述'}}</span>
                    </div>
                    
                </div>
                <div class="detail">
                    <span>详细了解</span>
                </div>
            </div>
            <div class="footer">
                <span class="ad-title">Audience Network 的广告将显示在第三方移动应用和移动网站中。</span>
                <span class="ad-content">请注意，这只是预览。广告在其他应用和网站可能有不同显示。</span>
            </div>
        </div>
        <div v-else>
            <dont-support-message :type="type"/>
        </div>
    </div>
    
</template>

<script>
    import Vue from 'vue'
    import { Carousel,CarouselItem } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex'

    import DontSupportMessage from '~components/ad-preview/dont-support-message.vue'
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    Vue.use(Carousel)
    Vue.use(CarouselItem)

    export default {
        components: {
            DontSupportMessage,
            DontChooseMedia
        },
        props: {
            'data': {
                default: {}
            }
        },
        
        data (){
            return {
                type:'Audience Network',
                play: false,
                bannerTitle:false,
                bannerDetail:true,
            }
        },
        computed: {
            ...mapGetters([
                'adCreate'
            ]),
            adverText: function () {
                if(this.data.singleImg.using){
                    this.text = this.adCreate.adText[0];
                }else if(this.data.carousel.using){
                    this.text = this.adCreate.adText[this.imgIndex];
                }else if(this.data.video.using){
                    this.text = this.adCreate.adText[0];
                }
                return this.text || ""
            },
            adverTitle: function () {
                if(this.data.singleImg.using){
                    this.title = this.data.singleImg.title;
                }else if(this.data.carousel.using){
                    this.title = this.data.carousel.imageInfo;
                }else if(this.data.video.using){
                    this.title = this.data.video.title;
                }
                return this.title || "";
            }
        },
        methods: {
            playVideo(){
                let _this = this;
                let video = document.getElementById('previewVideo');
                video.play();
                this.play = true;
                video.addEventListener('ended',function () {
                    _this.play = false
                })
            },
            pauseVideo(){
                document.getElementById('previewVideo').pause();
                this.play = false
            }
        },
        created () {
            let timer = setInterval(()=>{
                this.bannerTitle = !this.bannerTitle
                this.bannerDetail = !this.bannerDetail
            },5000)
        }
    }
</script>

<style lang="scss" scoped>
    *{
        box-sizing: border-box;
    }
    .wraper{
        overflow: hidden;
        position: relative;
        width: 346px;
        height: 216px;
        margin: 10px auto;
        padding:10px;
        // border: 1px solid rgba(0,0,0,.3);
        background-color: #fff;
        word-wrap: break-word;
        color: #191919;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
    }
    .body{
        width: 324px;
        height: 54px;
        border:2px solid rgb(196, 210, 231);
        overflow: hidden;
    }
    .user-img{
        width: 50px;
        height: 50px;
        overflow: hidden;
        float: left;
        img{
            width: 50px;
            height: 50px;
        }
    }
    .banner{
        width: 180px;
        height: 50px;
        float: left;
        padding-left:5px;
        position:relative;
        .item{
            height: 50px;
            padding:8px 0;
            position:absolute;
            transition: all 0.8s;
            span{
                display: block;
                width: 180px;
                height: 18px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .item-single{
                height: 40px;
                line-height: 40px;
            }
        }
        .item-hidden{
            opacity: .1;
            top:-120px
        }
    }
    .detail{
        width: 80px;
        height: 50px;
        line-height: 50px;
        float: right;
        color: rgb(255, 255, 255);
        font-size: 15px;
        font-style: normal;
        font-weight: bold;
        text-align: center;
        background: linear-gradient(rgb(110, 184, 62), rgb(76, 167, 29));
    }
    .footer{
        margin-top: 10px;
        position: relative;
        font-size: 13px;
        span{
            display: inline-block;
            width: 100%;
            line-height: 18px;
        }
    }
    .ad-title{
        color: #999;
        cursor: pointer;
        font-weight: bold;
        font-size: 11px;
    }
    .ad-content{
        color: #999;
        font-size: 11px;
        margin-top: 10px;
    }

    
</style>
